<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
			*{
				
				text-decoration: none;
			}
			div.cart{
				width: 600px;
				height: 300px;
				margin: 0 auto;
				border: 1px solid black ;
			}
			div.cart_bookPicture{
				border: 1px solid blueviolet;
				margin: 4px;
				width: 30%;
				height: 80%;
				float: left;
			}
			div.cart_bookinformation{
				
				
				margin-left: 50px;
				width: 60%;
				height: 100%;
				float: left;
			}
			div.cart_bookauthor{
				color: blue;
				font-size: 13px;
				
			}
			div.cart_purchase{
			
				width: 60px;
				height: 40px;
				margin-top: 20px;
				
			}
			div.cart_purchase>input{
				width: 55%;
				height: 30px;
				text-align: center;
					float: left;
			}
			div.cart_purchase>a{
				display: block;
				border: 1px solid aquamarine;
				text-align: center;
				width: 17px;
				height: 15px;
				float: right;
				line-height: 15px;
			}
			div.cart_gouwu{
				
				margin-top: 30px;
				color: azure;
				background-color: red;
				width: 90px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				
			}
			div.cart_gouwu>a{
				color: #F0FFFF;
			}
			div.cart_bookPicture>img{
			width:100%;
			heigth:100%;
			}
			
	</style>
</head>
<body>
	
	<div class="cart">
			
			<div class="cart_bookPicture">
				<img alt="" src="/J54Books${Commodity.defaultPicUrl }">
			</div>
			<div class="cart_bookinformation">
				<h2>${Commodity.goodsName}</h2>
				<div class="cart_bookauthor">
					${ Commodity.writer} 著
				</div>
				<div class="cart_purchase">
					<input id="text" class="text" value="1" >
					<a id="add" href="javascript:void(0)">+</a>
					<a id="reduce" href="javascript:void(0)">-</a>
					
				</div>
				<div class="cart_gouwu">
					<a id="addbook" href="javascript:void(0)">加入购物车</a>
				</div>
				<a id="regain">返回首页</a>
			</div>
			
			
		</div>
	<script type="text/javascript">
	
	
			if(${param.userId}==0){
				document.getElementById("regain").href="/J54Books/accessHomePagea";
			}else{
				document.getElementById("regain").href="/J54Books/accessHomePage";
			}
	
			
		var text=document.getElementById("text");
		var stock=${Commodity.stock};
		var add=document.getElementById("add");
		var reduce=document.getElementById("reduce");
		text.onblur=function(){
			
			if(text.value>stock){
				alert("超过库存，请重新输入");
				text.value="";
				
			}
			
		}
		add.onclick=function(){
			var text1=document.getElementById("text");
			var v=text1.value;
			if(v<stock){
				v++;
				text1.value=v;
			}
			
			
		}
		
		reduce.onclick=function(){
			var text1=document.getElementById("text");
			var v=text1.value;
			if(v>1){
				v--;
				text1.value=v;
			}
			
			
		}
		
		addbook.onclick=function(){
			var userid="${sessionScope.user.id}";
			
			if(userid==""){
				alert("还未登录");
				return;
				
			}
			
			var bookid=${Commodity.id};
			
			var booknumber=text.value;
			
			//定请求的URL地址  
			  var url="/J54Books/addBookBuy?userId="+userid+"&bookId="+bookid+"&bookNumber="+booknumber;
			  
			 //创建AJAX的对象
			  var req=new XMLHttpRequest();
			  
			  //设置请求的方式，和服务器建立连接通道
			  req.open("GET",url);
			  
			  //向服务器发送请求
			  req.send(null);
			
			  req.onreadystatechange=function(){
					
					if(req.readyState==4){
						
						if((req.status==200||req.status==304)){
							
							alert(req.response);
							
						}
						
			 		 }
			  }
			
		}
		
		
	
	</script>
	
</body>
</html>